
<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        购买订单
        <small>列表</small>
    </h1>
</section>

<!-- Main content -->
<section class="content" id="bills-app">

    <div class="row">
        <div class="col-md-12">
            <div class="form">
                <div class="col-md-1">
                    <div class="form-group">
                        <label>状态</label>
                        <select class="form-control" v-model="page.have_paid">
                            <option value="-1">全部</option>
                            <option value="1">完成</option>
                            <option value="0">未完成</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-1">
                    <div class="form-group">
                        <label>商品</label>
                        <select class="form-control" v-model="page.type">
                            <option value="0">全部</option>
                            <option value="1">课程</option>
                            <option value="2">直播</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-1">
                    <div class="form-group">
                        <label>支付</label>
                        <select class="form-control" v-model="page.pay">
                            <option value="0">全部</option>
                            <option value="1">支付宝</option>
                            <option value="2">微信</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-1">
                    <div class="form-group">
                        <label>时间段</label>
                        <select @change="changeTimeRange($event.target)" class="form-control">
                            <option value="0">所有</option>
                            <option value="1">今天</option>
                            <option value="2">昨天</option>
                            <option value="3">一周</option>
                            <option value="4">一月</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group">
                        <label>开始</label>
                        <input class="form-control" type="date" v-model="page.start">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group">
                        <label>结束</label>
                        <input class="form-control" type="date" v-model="page.end">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group">
                        <label>订单号</label>
                        <input class="form-control" v-model="page.no">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group">
                        <label>手机号</label>
                        <input class="form-control" v-model="page.mobile">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group">
                        <a class="btn btn-info" @click="getList">筛选</a>
                        <a class="btn btn-warning" @click="downloadBill">导出Excel</a>
                        <a class="btn btn-primary" href="#bill-create">添加订单</a>
                        <h4> 共<strong>{{total}}</strong>条记录</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="col-md-12" style="background: white">
                <h3>统计信息 <small><a class="btn" @click="getStatistic"><i class="fa fa-refresh"></i></a></small></h3>
                <table class="table table-responsive">
                    <tbody>
                    <tr>
                        <td>累计</td>
                        <td>金额：{{statistic.all.amount}}</td>
                        <td>总数：{{statistic.all.num}}</td>
                    </tr>
                    <tr v-for="item in statistic.all.list">
                        <td>{{item.item_name}}</td>
                        <td>{{item.pay_amount}}</td>
                        <td>{{item.num}}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <table class="table table-responsive table-striped table-bordered">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>商品</th>
                    <th>订单号</th>
                    <th>支付金额</th>
                    <th>应付金额</th>
                    <th>使用积分</th>
                    <th>支付平台</th>
                    <th>交易方式</th>
                    <th>销售机构</th>
                    <th>订单类型</th>
                    <th>用户手机号</th>
                    <th>下单时间</th>
                    <th>完成时间</th>
                    <th>已完成</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="item in list">
                    <td>{{item.bill_id}}</td>
                    <td><span :title="item.bill_item_title">{{item.bill_item_title}}</span></td>
                    <td><span :title="item.bill_no">{{item.bill_no}}</span></td>
                    <td>{{item.bill_pay_amount}}</td>
                    <td>{{item.bill_payable_amount}}</td>
                    <td>
                        <span v-if="item.credit_cost">{{item.credit_cost}}</span>
                        <i v-if="!item.credit_cost" style="color:#aaa">无</i>
                    </td>
                    <td>
                        <span v-if="item.bill_pay_method">{{item.bill_pay_method}}</span>
                        <i v-if="!item.bill_pay_method" style="color:#aaa">无</i>
                    </td>
                    <td>{{item.bill_trade_way}}</td>
                    <td>
                        <strong v-if="item.is_vip" style="color: red">汇金销售</strong>
                        <span v-if="!item.is_vip">{{item.agency_name}}</span>
                    </td>
                    <td>{{item.bill_type}}</td>
                    <td>{{item.mobile}}</td>
                    <td>{{item.bill_createtime}}</td>
                    <td>{{item.bill_paytime}}</td>
                    <td>{{item.bill_have_paid ? '是' : '否'}}</td>
                    <td>
                        <a v-if="!item.bill_have_paid" class="btn btn-warning btn-xs" @click="dealBill(item)">确认订单完成</a>
                        <a v-if="!item.bill_have_paid" class="btn btn-danger btn-xs" @click="del(item)">删除</a>
                    </td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="100">
                        <page :rows="page.rows" :last="page.last" v-model="page.page"></page>
                    </td>
                </tr>
                </tfoot>
            </table>
        </div>
    </div>

    <div class="modal"></div>

</section>
<!-- /.content -->

<script>
    function Statistic() {
        this.amount = 0.0;
        this.num = 0;
        this.list = [];
    }
    var bills_app = new Vue({
        el: '#bills-app',
        data: {
            list: [],
            total: 0,
            page: {
                last: 1,
                page: 1,
                rows: 10,
                have_paid: 1,
                start: null,
                end: null,
                no: null,
                mobile: null,
                type: 0,
                pay: 0,
                way: 0
            },
            statistic: {
                all: new Statistic(),
                range: new Statistic()
            }
        },
        created: function () {
            this.getList();
            this.getStatistic();
        },
        methods: {
            getList(){
                ajax({
                    uri: '/bills/list',
                    data: this.page,
                    success: function(resp){
                        this.list = resp.data;
                        this.page.last = resp.last_page;
                        this.total = resp.total;
                    }.bind(this)
                });
            },
            getStatistic(){
                ajax({
                    uri: '/bills/statistic',
                    data: {},
                    success: function (resp) {
                        this.statistic.all = resp.data;
                    }.bind(this)
                })
            },
            downloadBill: function () {
                downloadFile('/bills/list_export_excel', this.page);
            },
            dealBill: function (item) {
                if (confirm('请确认客户已经支付，而订单未完成的情况下继续！此操作不可撤销，是否继续？') === false) return;
                ajax({
                    uri: '/bills/exec_success',
                    data: {bill_id: item.bill_id},
                    success: function (resp) {
                        this.getList();
                    }.bind(this)
                })
            },
            del: function (item) {
                if (!confirm('确定删除订单吗？不能恢复！\n建议在支付平台查询订单号，确认无效之后进行操作！')) return;
                ajax({
                    uri: '/bills/delete',
                    data: {id: item.bill_id},
                    success: function (resp) {
                        this.getList();
                    }.bind(this)
                })
            },
            changeTimeRange: function (select) {
                var val = select.value;
                var today = new Date();
                var fmtDate = 'yyyy-mm-dd';
                switch (val) {
                    case '0':
                        this.page.start = this.page.end = null;
                        break;
                    case '1':
                        this.page.start = today.format(fmtDate);
                        today.setDate(today.getDate() + 1);
                        this.page.end = today.format(fmtDate);
                        break;
                    case '2':
                        this.page.end = today.format(fmtDate);
                        today.setDate(today.getDate() - 1);
                        this.page.start = today.format(fmtDate);
                        break;
                    case '3':
                        this.page.end = today.format();
                        today.setDate(today.getDate() - 7);
                        this.page.start = today.format(fmtDate);
                        break;
                    case '4':
                        this.page.end = today.format();
                        today.setMonth(today.getMonth() - 1);
                        this.page.start = today.format(fmtDate);
                        break;
                }

                if (1 === this.page.page) this.getList();
                else this.page.page=1;
            }
        },
        watch: {
            'page.page': function (nv, ov) {
                this.getList();
            }
        }
    })
</script>
